<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
    <meta charset="UTF-8">
    <title>tabnavigator test</title>
    <link rel="stylesheet" href="../../themes/default/wi-all.css"/>
    <!--<link rel="stylesheet" href="../../themes/blue/theme.css"/>-->
    <!--<link rel="stylesheet" href="../../themes/blue/menu.css"/>-->
    <!--<link rel="stylesheet" href="../../themes/blue/tabset1.css"/>-->
</head>
<body ng-controller="mainCtrl">
    <div style="width: 100%;height:100%;margin: 0 auto;padding-top: 5px;">
        <button class="wi-btn" ng-click="items[0].active = true">
            Select item 1, using active binding
        </button>
        <button class="wi-btn" ng-click="items[1].disabled = !items[1].disabled">
            Enable/disable item 2, using disabled binding
        </button>
        <button class="wi-btn" ng-click="items[2].regular = !items[2].regular">
            Closeable item 3, using closeable binding
        </button>
        <button class="wi-btn" ng-click="addTabAndOpen()">
            Add Tab
        </button>
        <button class="wi-btn" ng-click="toggleShow()">
            show/hide
        </button>
        <button class="wi-btn" ng-click="doSomething()">doSomething</button>
        <br /><br />
        <!--ng-show="visiable"-->
        <wi-tabset height="200" width="80%"
                   enablerightmenu="true" tabheadsize="50"
                   wid="myTabset"
                   onBeforeClose="beforeCloseFun"
                   onClose="closeFun"
                   onSelect="selectFun"
                >
            <wi-tab ng-repeat="item in items"
                    wiid="{{item.wiid}}"
                    icon="{{item.icon}}"
                    heading="{{item.title}}"
                    regular="item.regular"
                    disable="item.disable"
                    active="item.active"
                    src="{{item.src}}">
                {{item.content}}
            </wi-tab>
            <wi-tab heading="Tab 1" icon="../../misc/icon/redflag16.png" active="true">First Tab
                Since some CSS style names are not valid keys for an object, they must be quoted. See the 'background-color' style in the example below
                Since some CSS style names are not valid keys for an object, they must be quoted. See the 'background-color' style in the example below</wi-tab>
            <wi-tab regular="true" size="150">
                <wi-tab-heading><b style="color:red;">自定义标签</b>123</wi-tab-heading>
                Second Tab, with alert callback and html heading!
            </wi-tab>
        </wi-tabset>
        <br /><br />

        <!--<wi-tabset vertical="true" height="250">
            <wi-tab id="t1" heading="测试1" icon="../../misc/icon/redflag16.png"><b>1</b> Vertical Content!
                Since some CSS style names are not valid keys for an object, they must be quoted. See the 'background-color' style in the example below
                Since some CSS style names are not valid keys for an object, they must be quoted. See the 'background-color' style in the example below</wi-tab>
            <wi-tab heading="测试2" regular="true" icon="../../misc/icon/redflag16.png"><b>2</b> Vertical Content!</wi-tab>
            <wi-tab heading="测试3" active="true"><b>3</b> Vertical Content!</wi-tab>
            <wi-tab heading="垂直标签4"><i>4</i> Vertical Content!</wi-tab>
        </wi-tabset>
        <br /><br />-->

        <!--<wi-tabset vertical="true" tabheadsize="50">
            <wi-tab id="t1" heading="测试1" icon="../../misc/icon/redflag16.png" active="true"><b>1</b> Vertical Content!
                Since some CSS style names are not valid keys for an object, they must be quoted. See the 'background-color' style in the example below
                Since some CSS style names are not valid keys for an object, they must be quoted. See the 'background-color' style in the example below</wi-tab>
            <wi-tab heading="测试2" icon="../../misc/icon/redflag16.png"><b>2</b> Vertical Content!</wi-tab>
            <wi-tab heading="测试3"><b>3</b> Vertical Content!</wi-tab>
            <wi-tab heading="垂直标签4"><i>4</i> Vertical Content!</wi-tab>
        </wi-tabset>
        <br><br>-->

        <!--<button class="btn btn-small" ng-click="selectTab2()">选中第二个标签</button>
        <wi-tabset height="200" width="750" enablerightmenu="true" >
            <wi-tab heading="标签1" active="true">
                标签tab1
            </wi-tab>
            <wi-tab heading="标签2" active="actives.active2">
                    <wi-datagrid  dataProvider="dgData" wid="dg" width="100%" height="100%"
                                  pagemode="client" showno="true" >
                        <wi-datagrid-column headtext="姓名" datafield="name"></wi-datagrid-column>
                        <wi-datagrid-column headtext="年龄" datafield="age"></wi-datagrid-column>
                    </wi-datagrid>
            </wi-tab>
        </wi-tabset>-->
    </div>
    <script src="../../lib/angular-1.3.6/angular.js"></script>
    <script src="../common/common.js"></script>
    <script src="../resizelistener/resizelistener.js"></script>
    <script src="../position/position.js"></script>
    <script src="../popup/popup.js"></script>
    <script src="../menu/menu.js"></script>
    <script src="tabset.js"></script>
    <!--<script src="../../build/WebUI4Angular-tpls-all.js"></script>-->
    <script>
        angular.module('myApp', [/*'ui.wisoft'*/'ui.wisoft.tabset'])
            .controller('mainCtrl', ['$scope', function($scope){
                    $scope.dgData=[
                        {name: '姓名1',age: 19},
                        {name: '姓名2',age: 21}
                    ];
                    $scope.items = [
//                        { title:"Disable Tab", content:"Disable Tab", disable: true},
//                        {wiid:'static', title:"Static Tab", content:"Dynamic Item 1", regular: true},
                        {wiid:'0', title:"Dynamic Title 0", content:"Dynamic Item 0", icon:"../../misc/icon/redflag16.png"},
                        {wiid:'1', title:"Dynamic Title 1", content:"Dynamic Item 1", icon:"../../misc/icon/redflag16.png", active: true},
                        {wiid:'2', title:"Dynamic Title 2", content:"Dynamic Item 2", icon:"../../misc/icon/redflag16.png", regular: true},
//                        {wiid:'3', title:"Dynamic Title 3", content:"Dynamic Item 3", icon:"../../misc/icon/redflag16.png"},
//                        {wiid:'4', title:"Dynamic Title 4", content:"Dynamic Item 0", icon:"../../misc/icon/redflag16.png"},
//                        {wiid:'5', title:"Dynamic Title 5", content:"Dynamic Item 0", icon:"../../misc/icon/redflag16.png"},
//                        {wiid:'6', title:"Dynamic Title 6", content:"Dynamic Item 0", icon:"../../misc/icon/redflag16.png"},
//                        {wiid:'7', title:"Dynamic Title 7", content:"Dynamic Item 0", icon:"../../misc/icon/redflag16.png"},
//                        {wiid:'8', title:"Dynamic Title 8", content:"Dynamic Item 0", icon:"../../misc/icon/redflag16.png"},
                        {wiid:'n', title:"Dynamic Title N", content:"Dynamic Item N"}
                    ];

                    $scope.alertMe = function(tab) {
                        console.log(tab);
                    };

                    var addId=0;
                    $scope.addTabAndOpen = function() {
                        $scope.items.push({ title:"Add Title "+(addId++), content:"Add Dynamic Item",src:"../../misc/test.html",active:true, closeable: true});
                    };

                    $scope.actives = {active1:true,active2:false};
                    $scope.selectTab2 = function() {
                        //$scope.active1 = false;
                        $scope.actives.active2 = true;
                        $scope.items[0].active = true
                    };

                    $scope.beforeCloseFun = function(data){
                        console.log('onbeforeClose', data);
                        if(data.heading == 'Dynamic Title 4') return false;
                    };
                    $scope.closeFun = function(data){
                        console.log('onclose', data);
                        for(var i=0;i<$scope.items.length;i++){
                            if(data.wiid && data.wiid==$scope.items[i].wiid || data.heading && data.heading==$scope.items[i].title){
                                $scope.items.splice(i,1);
                                break;
                            }
                        }
                    };

                    $scope.selectFun = function(data){
                        console.log('select:', data);
                    };

                    $scope.myTabset={};
                    $scope.toggleShow = function(){
                        $scope.visiable = !$scope.visiable;
                        $scope.myTabset.reCompute();
                    };

                    $scope.doSomething = function(){
//                        var res=$scope.myTabset.options();
                        var res=$scope.myTabset.getTab('heading', 'Tab 1');
//                        $scope.myTabset.select(res);
                        $scope.myTabset.close(res);
//                        var res=$scope.myTabset.getTabs('icon', '../../misc/icon/redflag16.png');
//                        var res=$scope.myTabset.getActiveTab();
                        console.log(res);
                    }
            }]
        );
    </script>
</body>
</html>